<template>
	<div>
		<div class="cif-datasource-dashboard-data">
			<el-row>
				<el-col :span="6">
					<span class="cif-datasource-dashboard-data-left-label">数据源类型</span>
				</el-col>
				<el-col :span="18">
					<el-select
						size="small"
						v-model="datasourceTpyeValue"
						placeholder="请选择"
						style="margin-bottom: 10px; float: right; width: 100%">
						<el-option
							v-for="item in dataSourceTpyeSelectOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
							:disabled="item.disabled"></el-option>
					</el-select>
				</el-col>
			</el-row>
			<!-- 静态数据 -->
			<DataSourceTypeofStatic
				v-if="datasourceTpyeValue === '1'"
				ref="DataSourceTypeofStaticRef"
				:instance="props.instance"
				:setConfiguredDataToInstance="props.setConfiguredDataToInstance" />
			<!-- API接口 -->
			<!-- <DataSourceTypeofAPI
				v-if="datasourceTpyeValue === '3'"
				ref="DataSourceTypeofAPIRef"
				:instance="props.instance" /> -->
		</div>
		<div class="down-btn-area" v-if="datasourceTpyeValue === '1'">
			<el-button size="small" type="primary" style="margin: 10px" @click="saveDataToInstanceTpye1">
				保存静态数据
			</el-button>
		</div>
		<div class="down-btn-area" v-if="datasourceTpyeValue === '3'">
			<el-button size="small" type="primary" style="margin: 10px" @click="saveDataToInstanceTpye3">
				保存API接口
			</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import _ from 'lodash';
import DataSourceTypeofStatic from './Component/DataSourceTypeofStatic.vue';
// import DataSourceTypeofAPI from './Component/DataSourceTypeofAPI.vue';
// import { usePrimaryStore } from '@/store';
// import { ElMessage } from 'element-plus';

// const store = usePrimaryStore();

const props = defineProps({
	instance: {
		type: Object,
		default() {
			return {};
		}
	}, // cpntTreeNode
	setConfiguredDataToInstance: {
		type: Function,
		default() {
			return () => {};
		}
	}
});
const dataSourceTpyeSelectOptions = [
	{
		value: '1',
		label: '静态数据'
	},
	// {
	// 	value: '2',
	// 	label: 'CSV文件',
	// 	disabled: true
	// },
	{
		value: '3',
		label: 'API接口',
		disabled: true
	}
	// {
	// 	value: '4',
	// 	label: 'MySQL数据库',
	// 	disabled: true
	// },
	// {
	// 	value: '5',
	// 	label: 'PostgreSQL数据库',
	// 	disabled: true
	// }
]; //数据源类型下拉框数据集
const datasourceTpyeValue = ref('1'); //数据源类型选择

const DataSourceTypeofStaticRef = ref();
function saveDataToInstanceTpye1() {
	DataSourceTypeofStaticRef.value.saveDataToInstance();
}

onMounted(() => {});
defineExpose({});
</script>

<style lang="scss" scoped>
.cif-datasource-dashboard-data {
	height: calc(100% - 72px - 15px);
	padding: 15px;
	overflow: auto;
	// 滚动条样式
	&:hover::-webkit-scrollbar {
		background: #3d3f46; /* 滑块颜色 */
	}
	&::-webkit-scrollbar {
		/* 滚动条默认隐藏 */
		background-color: transparent;
		width: 6px; /* 滚动条宽度 */
	}
	&::-webkit-scrollbar-track {
		/* 滚动条轨道样式 */
		background: transparent;
	}

	&::-webkit-scrollbar-thumb {
		/* 滚动条滑块样式 */
		// background: #3d3f46; /* 滑块颜色 */
		border-radius: 3px; /* 滑块圆角 */
	}

	&::-webkit-scrollbar-thumb:hover {
		/* 鼠标悬停在滑块上时样式 */
		background: #55575e; /* 滑块悬停颜色 */
	}
	&-left-label {
		float: left;
		margin-top: 5px;
	}
	&-code {
		height: 500px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	&-checkbox {
		margin-top: 10px;
	}
}

.down-btn-area {
	position: relative;
	width: 100%;
	bottom: 0;
	background-color: transparent;
	border-top: 1px solid var(--primary-high);
}
</style>
